<template>
  <view class="viewport">
    <view class="header" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <view class="left icon-left" @tap="Onleft()"></view>
      <uni-title type="h1" align="center" title="图片上传" class="text"></uni-title>
    </view>
    <uni-section title="请选择图片" type="line">
      <view class="example-body">
        <uni-file-picker
          limit="100"
          title=""
          sizeType="['compressed']"
          :auto-upload="false"
          v-model="fileList"
          @select="selectFileNew"
          @delete="deleteFileNew"
        ></uni-file-picker>
        <progress v-if="uploading" :percent="progress" stroke-width="5" />
      </view>
    </uni-section>
  </view>
</template>

<script setup lang="ts">
import { GetMonthCountType } from '@/services/count'
import { GetAccountTypeNameAPI, GetUserAccountAPI, GetUserSettingAPI } from '@/services/detail'
import { DelFileAPI, SearchFileAPI } from '@/services/img'
import { NoteIndex } from '@/services/notelog'
import { useMemberStore } from '@/stores'
import type { GetMonthCountResponse } from '@/types/count'
import type { AccountTypeNameResponse, UserAccount } from '@/types/detail'
import { getBaseUrl } from '@/utils/http'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

// 定义 props 接收数据
const query = defineProps<{
  UserName: string
  ImgType: string
}>()

const route = useRoute()
const accountTypeNames = ref<AccountTypeNameResponse[]>()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 获取会员信息
const memberStore = useMemberStore()
const fileList = ref()
const uploading = ref(false)
const progress = ref(0)

//加载初始化
onLoad(async () => {
  await getPicList()
})

//返回
const Onleft = () => {
  history.back()
  // uni.navigateBack({
  //   delta: 1,
  // })
}

//上传
const selectFileNew = (res: any) => {
  uploading.value = true
  progress.value = 0
  var imageSrc = res.tempFilePaths[0]
  var uploadTask = uni.uploadFile({
    url: getBaseUrl() + `/File/UploadFile`, // 上传图片的接口
    filePath: imageSrc,
    name: 'file',
    formData: {
      // 服务端上传接口要求的其他参数
      ImgType: query.ImgType,
      UserName: query.UserName,
    },
    success: async (uploadFileRes) => {
      uploading.value = false
      getPicList()
    },
    fail: (fail) => {
      uploading.value = false
      getPicList()
    },
  })
  uploadTask.onProgressUpdate((res) => {
    progress.value = res.progress
    console.log('上传进度' + res.progress)
  })
}
//删除
const deleteFileNew = async (res: any) => {
  let { tempFile } = res
  console.log(tempFile.uuid)
  // 删除图片接口
  await DelFileAPI({
    ID: tempFile.uuid,
  })
  // 获取图片list
  await getPicList()
}
const getPicList = async () => {
  // 获取图片list的接口
  const datas = await SearchFileAPI({
    ImgType: query.ImgType,
    UserName: query.UserName,
    ID: 0,
  })
  // 更新v-model绑定值
  fileList.value = datas.result.map((ele) => {
    return {
      uuid: ele.ID,
      url: ele.ImgUrl,
    }
  })
}
</script>

<style lang="scss">
@import './styles/fileUpload.scss';
</style>
